<template>
  <div class="imgupload">
    <el-upload
      v-if="!imageUrl"
      action=""
      :before-upload="beforeUpload"
      :http-request="httpRequest"
      list-type="picture-card"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <div class="imgbox" v-else>
      <img
        width="100%"
        v-errimg="defaultimg"
        @click="bigshow = true"
        :src="imageUrl"
        alt=""
      />
      <i class="el-icon-close myicon" @click="clearimg"></i>
    </div>
    <el-dialog
      class="mydialog"
      title="图片预览"
      v-show="bigshow"
      :visible.sync="bigshow"
    >
      <img :src="imageUrl" v-errimg="defaultimg" alt="" />
    </el-dialog>
    <el-progress
      :percentage="percentage"
      :show-text="false"
      style="width: 150px; margin-top: 10px"
      v-if="progerssshow"
    ></el-progress>
  </div>
</template>

<script>
import COS from "cos-js-sdk-v5";
export default {
  props: ["imageUrl"],
  data() {
    return {
      bigshow: false,
      progerssshow: false,
      cos: null,
      percentage: 0,
      defaultimg:
        "https://img2.baidu.com/it/u=997198341,3864290766&fm=26&fmt=auto&gp=0.jpg",
    };
  },
  methods: {
    clearimg() {
      this.$emit("clerimage");
    },
    httpRequest(file) {
      this.progerssshow = true;
      const myfile = file.file;
      this.cos.putObject(
        {
          Bucket: "renzi71-1306778390" /* 必须 */,
          Region: "ap-chengdu" /* 存储桶所在地域，必须字段 */,
          Key: myfile.name /* 必须 */,
          StorageClass: "STANDARD",
          Body: myfile, // 上传文件对象
          onProgress: (progressData) => {
            console.log(JSON.stringify(progressData));
            this.percentage = progressData.percent * 100;
          },
        },
        (err, data) => {
          // data:上传成功后的返回值
          // err:上传出错的错误信息
          this.$emit("getimgurl", "http://" + data.Location);

          setTimeout(() => {
            this.progerssshow = false;
          }, 1000);
        }
      );
    },
    beforeUpload(file) {
      // 大小不能大于 2M
      const less2M = file.size / 1024 / 1024 < 2;
      // 类型只能是 jpg & png
      const isType = file.type === "image/jpeg" || file.type === "image/png";
      // 判断
      if (!less2M) {
        this.$message.error("图片过大");
      }
      if (!isType) {
        this.$message.error("只支持 jpg 或者 png 格式的图片");
      }
      return less2M && isType;
    },
  },
  created() {
    // 初始化存储对象
    this.cos = new COS({
      SecretId: "AKIDwhBPM2RZQzIK4XliOnvnOhjUyA5k8E3b",
      SecretKey: "JL6anjNkqfDUTBcldFZuzoMdcKlvoPkn",
    });
  },
};
</script>

<style lang='scss' scoped>
.imgbox {
  position: relative;
  width: 150px;
  height: 150px;
  img {
    width: 100%;
    height: 100%;
  }

  .myicon {
    position: absolute;
    right: 0;
    padding: 2px;
    top: 0;
    font-size: 11px;
    color: white;
    border-radius: 50% 0 5px 25px;
    cursor: pointer;
    background-color: rgba(92, 182, 255);
  }
  .el-dialog__body {
    text-align: center;
    img {
      width: 100px;
      height: 100px;
    }
  }
}
</style>